<template>
    <a-date-picker v-bind="bindValues" @change="panelChange" />
</template>
<script lang="ts">
import { Moment } from 'moment';
import moment from 'moment';
import { computed, defineComponent } from 'vue';
export default defineComponent({
    props: {
        value: {
            type: String,
            default: ''
        }, // 初始值
        disabledDate: {
            type: Boolean,
            default: true
        } // 是否有不可选择的日期
    },
    emits: ['update:value'],
    setup(props, { emit, attrs }) {
        // 限制选择日期范围
        const disabledDateRange = (current: Moment) => {
            return current && current < moment().endOf('day');
        };
        // 绑定属性
        const bindValues = computed(() => {
            // 默认日期
            const defaultValue = props.value ? moment(props.value, 'YYYY/MM/DD') : '';
            if (props.disabledDate) {
                return {
                    ['disabled-date']: disabledDateRange, //是否限制选择日期范围
                    ...attrs,
                    defaultValue,
                    value: defaultValue
                };
            } else {
                return {
                    ...attrs,
                    defaultValue,
                    value: defaultValue
                };
            }
        });
        // 日期回调
        const panelChange = (e) => {
            emit('update:value', e ? e.format('YYYY-MM-DD HH:mm:ss') : '');
        };
        return {
            bindValues,
            panelChange
        };
    }
});
</script>
